import 'package:flutter/material.dart';
import './tabs/home.dart';
import './tabs/home2.dart';
import './tabs/category.dart';
import './tabs/setting.dart';
import './tabs/user.dart';
import './tabs/message.dart';
import './tabs/hero.dart';

//底部导航栏
class Tabs extends StatefulWidget {

  //调用tabs的时候传值，跳转特定页面
  final int index;
  const Tabs({super.key, this.index = 0});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  //定义选中参数
  late int _currentIndex = 0;
  //跳转传值过来的指定页面
  @override
  void initState(){
    super.initState();
    _currentIndex = widget.index;
  }

  //指定选中页面
  final List<Widget> _pages = [
    const Home2Page(),
    // CategoryPage(),
    // MessagePage(),
    const SettingPage(),
    UserPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   //阴影
      //   elevation: 1,
      //   title: const Text("Flutter Demo"),
      //   //设置顶部appBar背景颜色
      //   backgroundColor: Colors.orange,
      // ),


      //Drawer：侧边栏
      drawer: Drawer(
        // child: Text("左侧侧边栏"),
        child: Column(
          children: [
            // SizedBox(height: 60,),
            Row(
              children: [
                Expanded(
                  //让组件占满整个所选区域
                  flex: 1,
                  //DrawerHeader：自定义配置头部
                  // child: DrawerHeader(
                  //   // child: Text("头部"),
                  //   //背景颜色及图片
                  //   decoration: BoxDecoration(
                  //     color: Colors.yellow,
                  //     image: DecorationImage(
                  //       image: NetworkImage("http://43.139.39.5:82/pho/face/1.jpg"),
                  //       //铺满容器
                  //       fit: BoxFit.cover,
                  //     ),
                  //   ),
                  //   //昵称及头像
                  //   child: Column(
                  //     children: [
                  //       ListTile(
                  //         //在CircleAvatar配置圆形图片需要配置NetworkImage而不是Image.network
                  //         leading: CircleAvatar(
                  //           // child: Image.network(
                  //           backgroundImage: NetworkImage(
                  //             "http://43.139.39.5:82/pho/face/3.jpg",
                  //           ),
                  //         ),
                  //         title: Text(
                  //           "小优",
                  //           style: TextStyle(
                  //             color: Colors.white
                  //           ),
                  //         ),
                  //       )
                  //     ],
                  //   ),
                  // ),

                  //UserAccountsDrawerHeader：官方头部组件
                  child: UserAccountsDrawerHeader(
                    //姓名邮箱
                    accountName: const Text("小优"),
                    accountEmail: const Text("123@qq.com"),
                    //小头像
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage(
                        "http://43.139.39.5:82/pho/face/1.jpg"
                      ),
                    ),
                    //其他图片
                    otherAccountsPictures: [
                      Image.network("http://43.139.39.5:82/pho/face/8.jpg"),
                      Image.network("http://43.139.39.5:82/pho/face/9.jpg"),
                      Image.network("http://43.139.39.5:82/pho/face/10.jpg"),
                    ],
                    decoration: BoxDecoration(
                      //背景图片
                      image: DecorationImage(
                        //铺满容器
                        fit: BoxFit.cover,
                        image: NetworkImage("http://43.139.39.5:82/pho/face/6.jpg"),
                      ),
                    ),
                  ),

                )
              ],
            ),
            ListTile(
              //设置成圆形图标
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
              title: Text("个人中心"),
            ),
            Divider(),
            ListTile(
              //设置成圆形图标
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              title: Text("设置"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.headphones),
              ),
              title: Text("hero"),
              onTap: (){
                //跳转hero
                Navigator.pushNamed(context, "/hero");
              },
            )
          ],
        ),
      ),
      endDrawer: const Drawer(
        child: Text("右侧侧边栏"),
      ),

      //跳转指定页面
      body: _pages[_currentIndex],

      //BottomNavigationBar 自定义底部导航
      bottomNavigationBar: BottomNavigationBar(
        // backgroundColor: Color.fromRGBO(12, 123, 4, 1234),
        backgroundColor: Colors.white,

        //currentIndex：默认选中哪个，从0开始
        currentIndex: _currentIndex,
        //图标大小
        iconSize: 30,
        //如果有三个以上，则要设置type
        type: BottomNavigationBarType.fixed,
        //选中的颜色
        fixedColor: Colors.red,
        //监听点击事件
        onTap: (index){
          // print(index);
          //要调用setState才有效果
          setState(() {
            _currentIndex = index;
          });
        },
        items: const[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首页",
          ),


          // BottomNavigationBarItem(
          //   icon: Icon(Icons.category),
          //   label: "分类",
          // ),
          // BottomNavigationBarItem(
          //   icon: Icon(Icons.message),
          //   label: "消息",
          // ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: "设置",
          ),

          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            label: "用户",
          ),
        ],
      ),

      //悬浮按钮
      // floatingActionButton: Container(
      //   height: 70,
      //   width: 70,
      //   padding: EdgeInsets.all(2),
      //   //调整位置
      //   margin: EdgeInsets.only(top: 10),
      //   decoration: BoxDecoration(
      //     color: Colors.white12,
      //     //设置圆角
      //     borderRadius: BorderRadius.circular(30),
      //   ),
      //   child: FloatingActionButton(
      //     //设置背景颜色，点击的时候变色
      //     backgroundColor: _currentIndex == 2 ? Colors.red: Colors.blue,
      //     child: const Icon(Icons.add),
      //     //改为圆形
      //     shape: const CircleBorder (),
      //     onPressed: (){
      //       //点击跳转到消息页面
      //       setState(() {
      //         _currentIndex = 2;
      //       });
      //     },
      //   ),
      // ),
      //配置浮动按钮位置
      floatingActionButtonLocation:
      FloatingActionButtonLocation.centerDocked,

    );
  }
}









